<template>
    <div class="charts-box" :style="{ width: width, height: height }">
        <qiun-data-charts type="line" :canvas2d="canvas2d" :opts="opts" :chartData="chartData" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
interface SeriesType {
    name: string;
    date: number[];
    color?: string;
}
interface ChartDataType {
    categories: string[];
    series: SeriesType[];
}
const props = withDefaults(
    defineProps<{
        width?: string;
        height?: string;
        chartData: ChartDataType;
    }>(),
    { height: '420rpx', categories: () => [] },
);
const canvas2d = ref(true);
const chartData = ref(props.chartData);
const opts = ref({
    padding: [15, 10, 0, 15],
    enableScroll: false,
    dataLabel: false,
    legend: { position: 'top', padding: 2 },
    xAxis: {
        disableGrid: true,
    },
    yAxis: {
        gridType: 'dash',
        dashLength: 2,
    },
    extra: {
        line: {
            type: 'curve',
            width: 2,
            activeType: 'hollow',
        },
    },
});
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 100%;
}
</style>
